<template>
  <div class="news">
      <ul>
          <li>
              <i class="iconfont">&#xea0a;</i>
              <div>
                  <p>在线客服</p>
                  <span>查看与客服的沟通记录</span>
              </div>
              <i class="iconfont">&#xe88e;</i>
          </li>
          <li>
              <i class="iconfont">&#xe654;</i>
              <div>
                  <p>活动消息</p>
                  <span>你的地球日优惠福利来啦</span>
              </div>
              <i class="iconfont">&#xe88e;</i>
          </li>
          <li>
              <i class="iconfont">&#xe64b;</i>
              <div>
                  <p>服务消息</p>
                  <span>你有1张优惠券到账了</span>
              </div>
              <i class="iconfont">&#xe88e;</i>
          </li>
          <li>
              <i class="iconfont">&#xe61b;</i>
              <div>
                  <p>系统消息</p>
                  <span>秒杀专区暂时下线公告</span>
              </div>
              <i class="iconfont">&#xe88e;</i>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'news'
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 3288323 */
  src: url('//at.alicdn.com/t/font_3288323_mxpjdbvf68.woff2?t=1648627293159') format('woff2'),
       url('//at.alicdn.com/t/font_3288323_mxpjdbvf68.woff?t=1648627293159') format('woff'),
       url('//at.alicdn.com/t/font_3288323_mxpjdbvf68.ttf?t=1648627293159') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
*{box-sizing: border-box;}
.news{
    ul{
        li{
            width: 100%;
            height: 70px;
            background-color: white;
            margin-top: 10px;
            display: flex;
            padding: 0 20px;
            justify-content: space-around;
            align-items: center;
            i{
                font-size: 20px;
                color: #666;
            }
            div{
                flex: 1;
                margin-left: 15px;
                p{
                    color: #333;
                    font-size: 14px;
                }
                span{
                    color: #666;
                    font-size: 12px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
